import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/login'
import Layout from '../views/layout'
// 导入获取token函数
import { getToken } from '../utils/token'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/layout',
    name: 'Layout',
    component: Layout
  },
  {
    path: '/',
    redirect: '/login' /* 路由重定向，使一打开页面就显示login页 */
  }
]
const router = new VueRouter({
  routes
})

// 设置导航守卫(用于阻拦没有携带token却想进入首页等需要token的页面)
// 1.设置白名单（不需要携带token就能进入的页面）
const whiteList = ['/login']
// 2.设置访问权限
router.beforeEach((to, from, next) => {
  console.log(111)
  // to：想要去到的页面
  // from：从哪个页面跳转
  // next():倒转到哪里，必须执行，不执行就会导致死循环
  //    不传参：跳转到to的页面
  //    传参：跳转到传入的页面
  // 3.判断要去到的页面是否在白名单中
  if (whiteList.includes(to.path)) {
    console.log(222)
    // 4.在白名单就正常跳转
    next()
  } else {
    // 5.不在白名单就验证是否携带token
    if (getToken()) {
      // 携带了就正常跳转
      console.log(333)
      next()
    } else {
      // 没携带就跳转到登录页
      console.log(444)
      next('/login')
    }
  }
})

export default router
